<template>
  <div>

    <!-- 书籍列表表格 -->
    <el-table :data="bookList" stripe style="width: 100%">
      <el-table-column prop="title" label="书籍名称" width="150" />
      <el-table-column prop="type" label="类型" width="100">
        <template #default="scope">
          <span v-if="scope.row.type === 1">玄幻</span>
          <span v-else-if="scope.row.type === 2">都市</span>
          <span v-else-if="scope.row.type === 3">穿越</span>
          <span v-else-if="scope.row.type === 4">科幻</span>
          <span v-else-if="scope.row.type === 5">游戏</span>
          <span v-else-if="scope.row.type === 6">悬疑</span>
          <span v-else-if="scope.row.type === 7">生活</span>
          <span v-else>未知</span>
        </template>
      </el-table-column>
      <el-table-column prop="likes" label="点赞数" width="100" />
      <el-table-column prop="favorites" label="喜欢数" width="100" />
      <el-table-column prop="views" label="浏览数" width="100" />
      <el-table-column prop="publishDate" label="发布日期" width="150" />
      <el-table-column prop="summary" label="简介" width="150" show-overflow-tooltip="true" />

      <el-table-column label="操作" width="300" align="center">
        <template #default="scope">
          <el-button size="mini" @click="openEditDialog(scope.row)" type="primary">修改</el-button>
          <el-button size="mini" type="danger" @click="deleteBook(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination v-model:current-page="pagination.page" :page-size="pagination.size" :total="pagination.totalRecords"
      layout="total, prev, pager, next, sizes" @current-change="handlePageChange" @size-change="handleSizeChange"
      style="text-align: right; margin-top: 20px;" />

    <!-- 修改书籍信息的对话框 -->
    <el-dialog v-model="isEditDialogVisible" title="修改用户信息" width="400px">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="书籍名称" prop="title">
          <el-input v-model="editForm.title" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-input v-model="editForm.type" />
        </el-form-item>
        <el-form-item label="点赞数" prop="likes">
          <el-input-number v-model="editForm.likes" :min="0" />
        </el-form-item>
        <el-form-item label="喜欢数" prop="favorites">
          <el-input-number v-model="editForm.favorites" :min="0" />
        </el-form-item>
        <el-form-item label="浏览数" prop="views">
          <el-input-number v-model="editForm.views" :min="1" />
        </el-form-item>
        <el-form-item label="简介" prop="summary">
          <el-input type="textarea" v-model="editForm.summary" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';

const bookList = ref([]);
const isEditDialogVisible = ref(false);

// 分页信息
const pagination = reactive({
  page: 1,
  size: 10,
  totalRecords: 0,
});

// 用户编辑表单
const editForm = reactive({
  id: 0,
  title: '',
  type: '',
  likes: 0,
  favorites: 0,
  views: 1,
  publishDate: '',
  summary: 0
});


// 获取用户列表
const queryBooks = async () => {
  try {
    const response = await axios.get('/api/books/all', {
      params: { pageNum: pagination.page, pageSize: pagination.size }
    });
    if (response.data.code === 200) {
      bookList.value = response.data.data.listData;
      pagination.totalRecords = response.data.data.totalRecords;
    }
  } catch (error) {
    ElMessage.error('获取用户数据失败');
  }
};

// 打开修改用户信息的对话框
const openEditDialog = (book: any) => {
  editForm.id = book.id;
  editForm.title = book.title;
  editForm.type = book.type;
  editForm.likes = book.likes;
  editForm.favorites = book.favorites;
  editForm.views = book.views;
  editForm.publishDate = book.publishDate;
  editForm.summary = book.summary;
  isEditDialogVisible.value = true;
};


// 确认编辑用户信息
const confirmEdit = async () => {
  try {
    const rsp = await axios.put('/api/books/update', {
      id: editForm.id,
      title: editForm.title,
      type: editForm.type,
      likes: editForm.likes,
      favorites: editForm.favorites,
      views: editForm.views,
      publishDate: editForm.publishDate,
      summary: editForm.summary
    });
    console.log({
      id: editForm.id,
      title: editForm.title,
      type: editForm.type,
      likes: editForm.likes,
      favorites: editForm.favorites,
      views: editForm.views,
      publishDate: editForm.publishDate,
      summary: editForm.summary
    });

    if (rsp.data.code !== 200) {
      console.error('更新失败：', rsp.data);
      ElMessage.error('更新失败');
      return;
    }
    ElMessage.success('用户信息已更新');
    isEditDialogVisible.value = false;
    queryBooks(); // 更新用户列表
  } catch (error) {
    ElMessage.error('更新用户信息失败');
  }
};

// 删除书本
const deleteBook = async (id: number) => {
  try {
    await ElMessageBox.confirm('确定删除此书籍？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    await axios.delete(`/api/manage/book/${id}`);
    ElMessage.success('书本已删除');
    queryBooks(); // 更新用户列表
  } catch (error) {
    ElMessage.error('删除书本失败');
  }
};

// 处理分页页码变化
const handlePageChange = (newPage: number) => {
  pagination.page = newPage;
  queryBooks();
};

// 处理分页大小变化
const handleSizeChange = (newSize: number) => {
  pagination.size = newSize;
  pagination.page = 1; // 重置到第一页
  queryBooks();
};

// 页面加载时获取用户数据
onMounted(() => {
  queryBooks();
});

</script>

<style scoped>
.dialog-footer {
  text-align: right;
}

.el-table .el-button {
  margin-left: 8px;
}

.el-table .el-button:first-child {
  margin-left: 0;
}

.el-dialog .el-input,
.el-dialog .el-input-number {
  width: 100%;
}
</style>
